import { Card, Space, Table, Button, Popconfirm, message } from 'antd';
import { ColumnsType } from 'antd/es/table';

import commonService from '@/api/services/commonService';
import { useCommon } from '@/hooks/common';

export default function MessagePage() {
  const uri = 'message';
  const cateName = '消息通知';
  const formParams = {
    title: '',
    content: '',
    id: 0,
    userId: '',
    status: '',
  };
  const { data = [], refetch } = useCommon({ title: '', userId: '' }, uri, {
    ...formParams,
  });

  const handleRead = (record: any) => {
    commonService.getCustomApi('/member/message/setReaded', { id: record.id }).then(() => {
      message.success('设置成功');
      refetch();
    });
  };

  const columns: ColumnsType<any> = [
    {
      title: '内容',
      dataIndex: 'content',
      align: 'center',
      width: 140,
      render: (content) => <div>{content}</div>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 140,
      render: (status) => <div>{status === 0 ? '未读' : '已读'}</div>,
    },
    { title: '发送时间', dataIndex: 'createTime', align: 'center', width: 120 },
    {
      title: '操作',
      key: 'operation',
      width: 100,
      render: (_, record) =>
        record.status === 0 ? (
          <Popconfirm
            title="确认标为已读？"
            okText="确定"
            cancelText="取消"
            placement="left"
            onConfirm={() => handleRead(record)}
          >
            <Button type="primary" ghost>
              标为已读
            </Button>
          </Popconfirm>
        ) : (
          <div
            className="flex h-[32px] w-[88px] items-center justify-center text-[#FD7901]"
            style={{
              borderRadius: '4px',
              background: '#FD790119',
              border: '1px solid #FD79014C',
            }}
          >
            已读
          </div>
        ),
    },
  ];

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card title={cateName} bordered={false}>
        <Table rowKey="id" size="small" columns={columns} dataSource={data} />
      </Card>
    </Space>
  );
}
